LYCORIS 2.1 - RESPONSIVE BLOGGER TEMPLATE

Keterangan

Info Template

Updated : November 2014

Lycoris 2.1 adalah template gratis dengan tampilan galeri yang sudah mendukung responsive dan SEO.

Fitur

Responsive Design
Masonry Grid Layout
SEO
Simple Flat Design
Custom Threaded Comment
Sidebar Recent Post Slider
2 Column
Responsive Ads ready
Breadcrumbs
Related Posts with Thumb
Search Box
Share Button
Top Menu
Main Dropdown Menu
Numbered Page Navigation
Top Social Bookmark
Subscribe Box
Smooth back To Top Button
Better Print Page Layout
Custom Contact Form Design
And more..

Penerapan

1. Log in ke Blogger dashboard > Buka Template > Edit HTML.

2. Sebelum anda menerapkan template ini, diusahakan untuk memback up template jika anda memutuskan untuk memakainya kembali.

3. Kemudian cari di file XML yang telah di download, klik "upload".

Setingan Template

Navigasi

Pertama buka Blogger > Template > "Edit HTML"

Temukan dan ubah semua simbol # dengan link anda.

Top Navigation :

<nav class='main-nav'>
<!-- Main menu -->
            <ul>
              <li class='sorting-01 twitter'><a href='#' target='_blank' title='Follow us on twitter'><i class='fa fa-twitter'/><span class='inv'/></a></li>
              <li class='sorting-02 facebook'><a href='#' target='_blank' title='Follow us on facebook'><i class='fa fa-facebook'/><span class='inv'/></a></li>
              <li class='sorting-03 googleplus'><a href='#' target='_blank' title='Follow us on google plus'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
              <li class='sorting-04 contactus'><a href='#' title='Contact Us'><i class='fa fa-envelope-o'/><span class='inv'/></a></li>
              <li class='sorting-05 oursitemap'><a href='#' title='Our Sitemap'><i class='fa fa-sitemap'/><span class='inv'/></a></li>
              <li class='searchbutton' title='Search this blog'/>
            </ul>
	        <a href='#' id='pull'>Menu</a>
          </nav><!-- /main-nav -->

Main Navigation :

<nav id='menu'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Static Page</a></li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a class='ai' href='#'>Dropmenu</a>
<ul class='menus'>
<li><a href='#'>Dropmenu 1</a></li>
<li><a href='#'>Dropmenu 2</a></li>
<li><a href='#'>Dropmenu 3</a></li>
<li><a href='#'>Dropmenu 4</a></li>
<li><a href='#'>Dropmenu 5</a></li>
</ul>
</li>
<li><a href='#'>Button</a></li>
<li><a href='#'>Error</a></li>
<li class='ranpost'><a onclick='feelingLucky();'><i/>Surprise Me</a></li>
</ul>
</nav>

Page Navigation :

Temukan dan ubah angka postperpage=12 dan numshowpage=5 dengan angka yang anda inginkan.

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=12;
var numshowpage=5;
</script>

Meta Tag

Pertama buka Blogger > Template > "Edit HTML"

Temukan dan ubah semua kata yang berhuruf besar dengan tulisan anda.

<meta content='KATA, KUNCI, TULIS, DISINI' name='keywords'/></b:if>
<link href='https://plus.google.com/KODEGOOGLEPLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/KODEGOOGLEPLUS/about' rel='author'/>
<link href='https://plus.google.com/KODEGOOGLEPLUS' rel='me'/>
<meta content='KODE-GOOGLE-DISINI' name='google-site-verification'/>
<meta content='KODE-MICROSOFT-BING-DISINI' name='msvalidate.01'/>
<meta content='KODE-ALEXA-DISINI' name='alexaVerifyID'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA ANDA' name='Author'/>
<meta content='general' name='rating'/>
<meta Content='snippet' name='googlebot'/>
<meta content='id' name='geo.country'/>
<meta content='KODE-APLIKASI-FB' property='fb:app_id'/>
<meta content='KODE-USER-FB' property='fb:admins'/>
<meta content='@TWITTERANDA' name='twitter:site'/>
<meta content='@TWITTERANDA' name='twitter:creator'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Post Page

Adsense

Pertama buka Blogger > Template > "Edit HTML"

Temukan dan ubah Place Your Ads Here (Already Parsed) dengan kode Ads yang telah diparse.

<div expr:id='&quot;adsmiddle1&quot; + data:post.id'/>
<div style='clear:both; margin:10px 0'>
<!-- Place Your Ads Here (Already Parsed) -->
</div>
<div expr:id='&quot;adsmiddle2&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;adsmiddle1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;adsmiddle2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Selanjutnya, ketika menulis postingan. Terapkan kode di bawah ini.

<!-- adsense -->

Contoh :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla venenatis odio, a consequat massa blandit ac.
Mauris ornare sapien in neque venenatis, ac fermentum tortor scelerisque. Integer sed ultricies magna, vitae gravida eros.
<!-- adsense -->
Etiam sapien massa, facilisis et semper in, sollicitudin ut turpis.Donec ac mauris dignissim, pretium enim non, vulputate est. Aliquam ut elementum enim, a vestibulum ipsum. Sed fringilla ac erat ut vulputate. Curabitur scelerisque, ligula non pretium venenatis, diam tortor sagittis mi, at malesuada risus leo nec est. Phasellus eleifend, purus a porttitor egestas, orci est porttitor ligula, et consequat diam tellus sed dolor. Aenean eu semper mauris, ut egestas nibh.

Author Box

Pertama buka Blogger > Template > "Edit HTML"

Cari kode di bawah ini.

<div class='articleAuthor'>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='http://2.bp.blogspot.com/-jseBc4frwF4/VGzXs77AnTI/AAAAAAAAHhw/uNwV2dbfles/s1600/Lycoris%2B2.1.png' width='120'/>
</div>
</div>
<div class='authorDetails'>
<h2>About <a href='#' rel='author' title='Posts by Admin'>Admin Lycoris</a></h2>
</div>
<p>This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.</p>
</div>
</div>
<div style='clear:both'/>

Widgets

Contact Form

Buat page baru untuk halaman statis > Salin dan pastekan kode di bawah ini (HTML Mode).

<form name="contact-form">
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-user"></i> Nama</span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-envelope"></i> Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;"><i class="fa fa-pencil"></i> Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
.post{padding:40px 20px;margin:0;background:#fff;}
.post-outer {overflow:hidden;padding:0 15px;}
#main {padding:0 10px;background:repeating-linear-gradient(-45deg, #fff, #fff 20px, #f3f1e2 20px, #f3f1e2 40px);}
</style>

Sitemap 1

Buat page baru untuk halaman statis > Salin dan pastekan kode di bawah ini (HTML Mode).

<div id="bp_toc">
Loading Sitemap. Please wait....</div>
<script src="https://arlina-design.googlecode.com/svn/blogtoc.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Sitemap 2

Buat page baru untuk halaman statis > Salin dan pastekan kode di bawah ini (HTML Mode).

<div id="table-outer">
<table><tbody>
<tr><td><label>Sort posts by : </label></td><td><select id="orderFeedBy"><option selected="" value="published">New post</option><option value="updated">Post updated</option></select></td></tr>
<tr><td><label>Filter posts by category : </label></td><td><span id="labelSorter"><select disabled=""><option selected="">Loading...</option></select></span></td></tr>
<tr><td><label>Search by keyword : </label></td><td><form id="postSearcher">
<input type="text" /></form>
</td></tr>
</tbody></table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://arlina-design.googlecode.com/svn/tocs.js" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>

Sidebar Recent Post Slider

Tambahkan New Gadget > Salin dan paste di bawah ini didalamnya > Kemudian ubah URL-DISINI dengan URL blog anda.

<div id="slider-rotator" class="slider-rotator loading">
</div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "URL-DISINI" // Ubah ke URL blog anda
});
</script>

Penting

Diusahakan untuk tidak menghapus link kredit pembuat template, saya hargai kejujuran anda. Terima kasih.

Lycoris 2.1 Template

Keterangan

Info Template

Fitur

Penerapan

Setingan Template

Navigasi

Meta Tag

Post Page

Widgets

Penting

arlinadesign.blogspot.com